<%--
  Created by IntelliJ IDEA.
  User: 您的名字
  Version: 1.0
 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>EasyUI CRUD 示例页面</title>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="<%=request.getContextPath()%>/">
    <!-- 引入 EasyUI 的默认主题样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/bootstrap/easyui.css">
    <!-- 引入 EasyUI 的图标样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
    <!-- 引入自定义的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/common.css"/>
    <!-- 引入省市区的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/address.css"/>
    <!-- 引入 EasyUI 默认的 jQuery（无需单独引入 jQuery） -->
    <script src="static/js/easyui/jquery.min.js"></script>
    <!-- 引入 EasyUI 的核心 JS 文件 -->
    <script src="static/js/easyui/jquery.easyui.min.js"></script>
    <!-- 引入 EasyUI 的中文语言包 -->
    <script src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/common.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/dataGrid.js"></script>
    <!-- 引入 moment.js 库，用于处理日期和时间 -->
    <script src="static/js/owner/moment.min.js"></script>
</head>
<body>
<!-- 工具栏 -->
<div id="toolbar">
    <!-- 查询表单 -->
    <form id="searchForm" class="custom-search-form">
        <div class="custom-search-form__group">
            <label>用户名:</label>
            <input class="easyui-textbox" name="username">
        </div>
        <div class="custom-search-form__group">
            <label>在线状态:</label>
            <input name="gender" class="easyui-combobox" data-options="
                        valueField:'id',textField:'text',
                        data:[
                            {id:'0',text:'男'},
                            {id:'1',text:'女'},
                        ],
                        editable: false,
                        prompt: '请选择性别',
                        panelHeight:'auto',
                        missingMessage:'请选择性别'">
        </div>
        <div class="custom-search-form__group">
            <label>手机号:</label>
            <input name="mobilePhone" class="easyui-textbox">
        </div>
        <div class="custom-search-form__group">
            <label>用户名:</label>
            <input name="nickname" class="easyui-textbox">
        </div>
        <div class="custom-search-form__actions">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="searchData()">查询</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="resetSearch()">重置</a>
        </div>
    </form>
    <!-- 操作按钮 -->
    <div style="margin-top: 20px;margin-bottom: 10px">
        <shiro:hasPermission name="user:add">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true"
               onclick="newUser()">新增</a>
        </shiro:hasPermission>
        <shiro:hasPermission name="user:update">
            <a href="javascript:void(0)" id="editBtn" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
               onclick="editUser()">编辑</a>
        </shiro:hasPermission>
        <shiro:hasPermission name="user:delete">
            <a href="javascript:void(0)" id="removeBtn" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
               onclick="destroyUser()">删除</a>
        </shiro:hasPermission>
        <shiro:hasPermission name="user:view">
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="excelDoc('sysUser/export')">导出</a>
            <a href="javascript:void(0)" id="detailBtn" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="viewDetails(``)">查看详情</a>
        </shiro:hasPermission>
        <a href="javascript:void(0)" id="refreshBtn" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="reload()">刷新</a>
    </div>
</div>

<!-- 数据表格 -->
<table id="datagrid" class="easyui-datagrid">
    <thead>
    <tr>
        <!-- 复选框 -->
        <th data-options="field:'ck',checkbox:true"></th>
        <th data-options="field:'id'">ID</th>
        <th data-options="field:'username',width:100">用户名</th>
        <th data-options="field:'password',width:100">密码</th>
        <th data-options="field:'email',width:150,sortable:true">邮箱</th>
        <th data-options="field:'mobilePhone',width:100">手机号</th>
        <th data-options="field:'status',width:150,sortable:true">用户状态</th>
        <th data-options="field:'updateTime',width:80,formatter:formatDate">更新时间</th>
        <th data-options="field:'avator',width:150,formatter:function(value, row, index){return formatImage(value, row, index, 100, 100, '用户头像');}">用户头像</th>
        <th data-options="field:'gender',width:150,sortable:true">性别</th>
        <th data-options="field:'nickname',width:150,sortable:true">用户昵称</th>
    </tr>
    </thead>
</table>

<!-- 对话框，用于新增记录 -->
<div id="addDialog" class="easyui-dialog custom-dlg" style="width:800px" data-options="closed:true,modal:true,border:'thin',buttons:'#add-dlg-buttons'">
    <form id="addForm" method="post" class="custom-dlg-form" novalidate style="margin:0;padding:20px">
        <!-- 隐藏的 ID 字段 -->
        <input type="hidden" name="id">

        <div class="form-container">
            <!-- 左侧列 -->
            <div class="form-column">
                <!-- 用户名 -->
                <div class="form-group">
                    <label>用户名</label>
                    <input name="username" class="easyui-textbox" style="width:100%"
                           data-options="required:true,validType:'length[3,20]', missingMessage:'请输入用户名'">
                </div>
                <!-- 密码 -->
                <div class="form-group">
                    <label>密码</label>
                    <input name="password" class="easyui-passwordbox" style="width:100%"
                           data-options="required:true, validType:'length[6,20]', missingMessage:'请输入密码', invalidMessage:'密码长度必须在6到20个字符之间'">
                </div>
                <!-- 性别 -->
                <div class="form-group">
                    <label>性别</label>
                    <input name="gender" class="easyui-combobox" data-options="
                        valueField:'id',textField:'text',
                        data:[
                            {id:'0',text:'男'},
                            {id:'1',text:'女'},
                        ],
                        editable: false,
                        prompt: '请选择性别',
                        panelHeight:'auto'" style="width:100%">
                </div>
                <!-- 用户头像 -->
                <%--<div class="form-group">--%>
                <%--    <label>用户头像</label>--%>
                <%--    <div class="pic-container">--%>
                <%--        <img id="preView" name="" src="" alt="用户头像" class="thumbnail">--%>
                <%--        <input type="file" name="file" accept="image/*" onchange="prev(this)">--%>
                <%--    </div>--%>
                <%--</div>--%>
            </div>

            <!-- 右侧列 -->
            <div class="form-column">
                <!-- 手机号 -->
                <div class="form-group">
                    <label>手机号</label>
                    <input name="mobilePhone" class="easyui-textbox" style="width:100%"
                           data-options="
                               required:true,
                               validType:'phone',
                               missingMessage:'请输入手机号',
                               invalidMessage:'请输入有效的手机号'">
                </div>
                <!-- 邮箱 -->
                <div class="form-group">
                    <label>邮箱</label>
                    <input name="email" class="easyui-textbox" style="width:100%"
                           data-options="
                               required:true,
                               validType:'email',
                               missingMessage:'请输入邮箱',
                               invalidMessage:'请输入有效的邮箱地址'">
                </div>
                <!-- 昵称 -->
                <div class="form-group">
                    <label>昵称</label>
                    <input name="nickname" class="easyui-textbox" style="width:100%"
                           data-options="required:true, missingMessage:'请输入昵称'">
                </div>
            </div>
        </div>
    </form>
    <!-- 对话框的按钮 -->
    <div id="add-dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser('#addForm', '#addDialog')">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#addDialog').dialog('close')">取消</a>
    </div>
</div>

<!-- 对话框，用于编辑记录 -->
<div id="editDialog" class="easyui-dialog custom-dlg" style="width:800px" data-options="closed:true,modal:true,border:'thin',buttons:'#edit-dlg-buttons'">
    <form id="editForm" method="post" class="custom-dlg-form" novalidate style="margin:0;padding:20px">
        <!-- 隐藏的 ID 字段 -->
        <input type="hidden" name="id">

        <div class="form-container">
            <!-- 左侧列 -->
            <div class="form-column">
                <!-- 用户名 -->
                <div class="form-group">
                    <label>用户名</label>
                    <input name="username" class="easyui-textbox" style="width:100%"
                           data-options="required:true,validType:'length[3,20]', missingMessage:'请输入用户名'">
                </div>
                <!-- 密码 -->
                <div class="form-group">
                    <label>密码</label>
                    <input name="password" class="easyui-passwordbox" style="width:100%"
                           data-options="required:true, validType:'length[6,20]', missingMessage:'请输入密码', invalidMessage:'密码长度必须在6到20个字符之间'">
                </div>
                <!-- 性别 -->
                <div class="form-group">
                    <label>性别</label>
                    <input name="gender" class="easyui-combobox" data-options="
                        valueField:'id',textField:'text',
                        data:[
                            {id:'0',text:'男'},
                            {id:'1',text:'女'},
                        ],
                        editable: false,
                        prompt: '请选择性别',
                        panelHeight:'auto'" style="width:100%">
                </div>
                <!-- 角色 -->
                <div class="form-group">
                    <label>角色</label>
                    <input id="roles" name="roles" class="easyui-combobox" style="width:100%">
                </div>
                <!-- 用户头像 -->
                <%--<div class="form-group">--%>
                <%--    <label>用户头像</label>--%>
                <%--    <div class="pic-container">--%>
                <%--        <img id="preView" name="" src="" alt="用户头像" class="thumbnail">--%>
                <%--        <input type="file" name="file" accept="image/*" onchange="prev(this)">--%>
                <%--    </div>--%>
                <%--</div>--%>
            </div>

            <!-- 右侧列 -->
            <div class="form-column">
                <!-- 手机号 -->
                <div class="form-group">
                    <label>手机号</label>
                    <input name="mobilePhone" class="easyui-textbox" style="width:100%"
                           data-options="
                               required:true,
                               validType:'phone',
                               missingMessage:'请输入手机号',
                               invalidMessage:'请输入有效的手机号'">
                </div>
                <!-- 邮箱 -->
                <div class="form-group">
                    <label>邮箱</label>
                    <input name="email" class="easyui-textbox" style="width:100%"
                           data-options="
                               required:true,
                               validType:'email',
                               missingMessage:'请输入邮箱',
                               invalidMessage:'请输入有效的邮箱地址'">
                </div>
                <!-- 昵称 -->
                <div class="form-group">
                    <label>昵称</label>
                    <input name="nickname" class="easyui-textbox" style="width:100%"
                           data-options="required:true, missingMessage:'请输入昵称'">
                </div>
            </div>
        </div>
    </form>
    <!-- 对话框的按钮 -->
    <div id="edit-dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser('#editForm', '#editDialog')">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#editDialog').dialog('close')">取消</a>
    </div>
</div>
</body>

<!-- 定义页面脚本 -->
<script type="text/javascript">
let $comboboxMulti = $("#roles");
let url; // 定义全局变量，保存当前操作的URL

$(function () {
    $.extend($.fn.validatebox.defaults.rules, {
        phone: {
            validator: function (value, param) {
                return /^1[3-9]\d{9}$/.test(value); // 示例：验证中国大陆手机号
            },
            message: '请输入有效的手机号码。'
        }
    });

    const pageConfig = {
        url: 'sysUser/listByCondition', // 数据源URL
        emptyMsg: '暂无数据',     //当 DataGrid 中没有数据时，会在表格中间显示"暂无数据"的提示。
    };

    // 调用公共函数初始化 DataGrid
    initializeDataGrid(pageConfig);

    // 根据权限初始化按钮状态
    initButtonsByPermission();
});

// 根据权限初始化按钮状态
function initButtonsByPermission() {
    // 使用AJAX调用后端接口获取当前用户权限
    $.ajax({
        url: 'sysUser/getUserPermissions',
        type: 'get',
        success: function(data) {
            if (data && data.extend && data.extend.permissions) {
                let permissions = data.extend.permissions;

                // 如果没有编辑权限，禁用编辑按钮
                if (!hasPermission(permissions, 'user:update')) {
                    $('#editBtn').linkbutton('disable');
                }

                // 如果没有删除权限，禁用删除按钮
                if (!hasPermission(permissions, 'user:delete')) {
                    $('#removeBtn').linkbutton('disable');
                }

                // 如果没有查看权限，禁用详情按钮
                if (!hasPermission(permissions, 'user:view')) {
                    $('#detailBtn').linkbutton('disable');
                }
            }
        },
        error: function() {
            $.messager.alert('错误', '获取用户权限失败', 'error');
        }
    });
}

// 检查是否有指定权限
function hasPermission(permissions, permissionName) {
    if (!permissions || !permissions.length) return false;
    return permissions.indexOf(permissionName) !== -1;
}

function initRoles(userId) {
    $("#roles").combobox({
        url: 'roles/selectRoles', // 数据源URL
        method: 'get',
        valueField: 'id',
        textField: 'name',
        multiple: true,
        editable: false,
        panelHeight: 'auto',
        loadFilter: function (data) {
            return data.extend.roles;
        },
        onLoadSuccess: function () {
            if (userId) {  // 如果有用户ID，则获取该用户的角色
                $.ajax({
                    url: 'roles/selectRolesByUserId',
                    type: 'post',
                    data: { userId: userId },  // 传递用户ID
                    success: function (data) {
                        // 从roles集合中提取所有id值
                        let roleIds = data.extend.roles.map(function(role) {
                            return role.id;
                        });
                        $comboboxMulti.combobox('setValues', roleIds);
                    },
                    dataType: 'json'
                });
            }
        }
    });
}
function newUser() {
    $('#addDialog').dialog('open').dialog('setTitle', '新增用户').window('center'); // 打开对话框
    $('#addForm').form('clear'); // 清空表单

    // initRoles(row.id);//传入用户id
    url = 'sysUser/add'; // 设置新增记录的请求URL
}

// 编辑记录
function editUser() {
    let row = $('#datagrid').datagrid('getSelected'); // 获取选中行
    if (row) {
        $('#editDialog').dialog('open').dialog('setTitle', '编辑用户').window('center');
        $('#editForm').form('load', row); // 加载选中行的数据到表单

        //要在窗口打开之后加载
        console.log("id====",row.id)
        initRoles(row.id);//传入用户id

        url = 'sysUser/update'; // 设置更新记录的请求URL
    } else {
        $.messager.alert('提示', '请先选择要编辑的记录！', 'info');
    }
}

function saveUser(formId, dialogId) {
    removeEmptyFields(formId);

    if (!$(formId).form('validate')) {
        $.messager.show({
            title: '提示',
            msg: '请检查输入项的有效性！',
            timeout: 2000, // 自动关闭时间，单位毫秒
            showType: 'slide' // 显示动画类型，如 'slide', 'fade', 'show'
        });
    }

    let formData = $(formId).form('serializeObject');

    formData.roles = $('#roles').combobox('getValues');
    // 如果没有选择任何角色，确保roles是空数组而不是空字符串
    if (!formData.roles || formData.roles.length === 0) {
        formData.roles = [];
    }

    console.log('发送的数据:', formData); // 添加日志

    $.ajax({
        url: url,  // 提交的URL
        data: JSON.stringify(formData),
        type: 'post',
        contentType: 'application/json',
        success(data) {
            $.messager.show({
                title: '提示',
                msg: data.msg,
                timeout: 3000, // 自动关闭时间，单位毫秒
                showType: 'slide' // 显示动画类型，如 'slide', 'fade', 'show'
            });
            // 提交成功后的回调
            $(dialogId).dialog('close');  // 关闭对话框
            $('#datagrid').datagrid('reload'); // 刷新数据表格
        },
        error(err) {
        },
        dataType: 'json'
    })
}

// 删除记录
function destroyUser() {
    var row = $('#datagrid').datagrid('getSelected');
    if (row) {
        $.messager.confirm('确认', '你确定要删除这条记录吗？', function (r) {
            if (r) {
                $.post('sysUser/delete', {id: row.id}, function (result) {
                    $.messager.show({
                        title: '提示',
                        msg: result.msg,
                        timeout: 3000, // 自动关闭时间，单位毫秒
                        showType: 'slide' // 显示动画类型，如 'slide', 'fade', 'show'
                    });
                    if (result.code == '200') {
                        $('#datagrid').datagrid('reload'); // 刷新数据表格
                    }
                }, 'json');
            }
        });
    } else {
        $.messager.alert('提示', '请先选择要删除的记录！', 'info');
    }
}

// 没有选中时 || 中多条数据时, 禁用哪些按钮
function disable() {
    $('#editBtn').linkbutton('disable');
    $('#removeBtn').linkbutton('disable');
    $('#detailBtn').linkbutton('disable');
}

// 选中一条数据时启用哪些按钮
function enable() {
    $('#editBtn').linkbutton('enable');
    $('#removeBtn').linkbutton('enable');
    $('#detailBtn').linkbutton('enable');
}

function reload() {
    // 刷新
    $('#datagrid').datagrid('reload');
}

// 图片预览和大小验证
function prev(input) {
    if (input.files && input.files[0]) {
        var file = input.files[0];
        if (file.size > 2 * 1024 * 1024) { // 2MB
            $.messager.alert('警告', '上传的图片不能超过2MB!', 'warning');
            input.value = '';
            $(input).siblings('.thumbnail').attr('src', '');
            return;
        }
        var reader = new FileReader();
        reader.onload = function(e) {
            var imgSrc = e.target.result;
            // 设置缩略图
            $(input).siblings('.thumbnail').attr('src', imgSrc);
        }
        reader.readAsDataURL(file);
    }
}
</script>
</body>
</html>
